//
//__17mar09__.project.pano  //author.dave_kim.dkim@yahoo.com
//credits.t_d_s.company.a_k_a.manda_time_lord.i
//license.open.source   //__28feb09__.be_more_clear
//
( function( $){
var unovi = {
//
//syllable break'down
//
//  o'  //the other  //out side  //every angle  //all oneness  //a thought
//  v'  //the like  //in side  //each angle  //one manyness  //real
//
//  a'  //one here right now  //element  //me
//  b'  //get  //take  //lick  //like
//
//  i'  //that sunrise we've all felt  //the way we all feel
//
//  ot'  //hot, what, other, sun  //each and every self  //the all side
//
//  element   //the likeness  //a rise  //the bearing  //me
//\   /|\   /
//__y  |  v    //like the like
//    \|/
//  a  w  b    //a' the many b'  //the lick  //be towards oneness
//  | \|/ |
//  cu o  i__  //lick under at i'
//\\
//  | |/
//  otu     //ot', hot, what, sun  //on top side of u'  //your side
// /|/|/
//unovi     //that i' licked
//|/|/|
//a o b     //a' b' lick together from other side  //lick b' side
//| |/
//\\
//the horizon   //the left-right side lick side
// \\     ||
//  b1    b0
//    \\//
// a2__ii__b2       //the like side b' side
//   //
//  a0    a1
//  ^^    ||\\
//\\
	zo: [  //like sides  //ways towards oneness
		undefined, undefined, undefined
		,undefined, undefined, undefined
	]
		,
	options: {
		selector: '#unovi'  //the document anchor
			,
		radius: 48
	}
}
	;
unovi
.options
.un_string=[  //z' impulse  //the on up's
	 " eot "  //head
	,"r  oh"  //
	,"e s i"  //
	,"ho  r"  //horizon
	," toe "  //
]
	;
var
my_zo = function( e, ui){  //ho!  //get a' likes
	$( 'div.b', 'div.ot')
	.map( function( o, z){  //b' likes
		var
		$z = $( z), $z_parent = $z.parent()  //a' likes
			,
		//b's use draggable helper and are not themselves draggable
		//using draggable prototype for jQuery intersect() routine
		b = $.extend(
			{}
			, $.ui.draggable.prototype
			, ui
		)
			;
		$.extend( b, {  //size b'
			helper: $z
 			, offsetParent: $z_parent
			, offset: {
				relative: { top: 0, left: 0}
				, parent: $z_parent.offset()
			}
			, helperProportions: {
				width: $z.outerWidth()
				, height: $z.outerHeight()
			}
			, margins: {
				left: ( parseInt( $z.css("marginLeft"),10) || 0),
				top: ( parseInt( $z.css("marginTop"),10) || 0)
			}
		})
			;
		b.positionAbs = b
		.convertPositionTo(  //bearing position
			'absolute'
			,
			$z.position()
		)
			;
		$( '.hover', '#unovi')
		.map( function( z, hover){  //assuming a' hover' class active
			var
			$hover = $( hover)
				,
			a = $.extend(  //a's are indeed droppable
				$.ui.droppable.prototype
				, ui
			)
				;
			$.extend(a, {
				offset: $hover.offset()
					,
				proportions: {
					width: $hover[0].offsetWidth
					, height: $hover[0].offsetHeight
				}
			})
				;
			if( $.ui.intersect(
				b, a, 'intersect'  //b' a' hover
			)){
				unovi
				.zo[ o] = $hover
			;}
		;})
	;})
;}
	;
$(function(){
	debugger;
	var
	radius = unovi.options.radius  //bigness (?__28apr09__)
	, un_string = unovi.options.un_string  //z' impulse
	, $unovi = $( unovi.options.selector)  //the document anchor
	.css({
		position: 'relative'
	})
		;
	un_string  //draw z'
	.map(function( u_string, n){
	$.map( u_string
	, function( a_string, u){
		//representing value with text character and background color
		return $( '<div class="a">')
		.css({
			position: 'absolute'
			, width: radius, height: radius
			, bottom: radius * ( n - ( un_string.length >>1) -1)
			, left: radius *( u + 1)
			, background: a_string <=' ' ?'SeaGreen':'SkyBlue'
		})
		.appendTo( $unovi)
		.append(
			$('<div class="text">')
			.text( a_string)
		)
		.droppable({
			hoverClass: 'hover'
				,
			tolerance: 'touch'
				,
			accept: 'div.ot'  //the b' helper  //the apparent
		})
	;})
	;})
		;
	var
	$ot = $( '<div class="ot">')  //ot'  //the draggabble b' helper
	.css({
		position: 'relative'
		, background: 'pink'
		, width: radius <<1, height: radius <<1
		, opacity: '0.88'
		, top: radius
		, left: radius <<1
	})
	.appendTo( $unovi)
	.append( '<div>drag me</div>')
	,
	radii = radius >>1
	,
	$bo = [3,2,1,0,-1,-2]  //create b' sides
	.map( function( o, z){
		return $( '<div class="b">')
		.css({
			position: 'relative'
			, background: 'lightgreen'
			, width: radii, height: radii
			, opacity: '0.88'
			//position first element, then a circular pattern
			, bottom: z == 0 ? -radius : parseInt( radii * Math.sin( o))
			, left: z == 0 ? radii : parseInt( radii * Math.cos( o))
		})
		.append(
			$( '<img src="white_gem">')  //gem indicator
			.css({
				position: 'absolute'
				, 'float': 'left'
				, height: '99%', width: '99%'
			})
		)
	;})
		;
	var
	$behind = $ot
		;
	$bo
	.map( function( $b){  //appending b' sides in a long chain
		$b
		.appendTo( $behind)
			;
		$behind = $b
	;})
		;
	$ot
	.draggable({  //setting indicators on each drag
		refreshPostions: true
			,
		drag: function( e, ui){
			my_zo( e, ui)  //get b' a' intersections
				;
			var
			$bo = $( 'div.b', 'div.ot')  //the b' sides
				,
			zo = [].concat( unovi.zo)  //get the likes
				,
			z = 5  //the bottom
				;
			[0,1,2,3,4,5]
			.map( function( s){  //setting gem color
				var
				$a = zo[ z], $b = zo[ s]  //the way to b'
					;
				if( $a && $b){
					var a, b
						;
					[a, b] = [ $a, $b]
					.map( function( z){
						//representing angle values with text
 						return z
						.find( '.text').text() <= ' '
					;})
						;
					//red represents impulse, otherwise white
					$bo.eq( s)
					.children( 'img')
					.attr( 'src', a ^ b ? 'red_ruby' : 'white_gem')
				;}
				z = s //step on up
			;})
		;}
	})
;})
;})
(jQuery)
	;
